{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": [],
      "private_outputs": true,
      "toc_visible": true,
      "authorship_tag": "ABX9TyNwHyYFeXQEa85fsB5yTiTt",
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/wwwillchen/mesop/blob/more_docs/notebooks/mesop_layout_colab.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Mesop Layout\n",
        "\n",
        "- https://github.com/mesop-dev/mesop\n",
        "- https://mesop-dev.github.io/mesop/guides/layout\n",
        "\n",
        "Mesop is a Python-based UI framework that allows you to rapidly build web apps like demos and internal apps. This Colab walks you through common layout patterns."
      ],
      "metadata": {
        "id": "8r6nOL0xPfyU"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Getting Started"
      ],
      "metadata": {
        "id": "ZCtrRuMdPpJG"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "!pip install mesop"
      ],
      "metadata": {
        "id": "buRfwUlqPons"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": [
        "import mesop as me\n",
        "import mesop.labs as mel\n",
        "\n",
        "me.colab_run()"
      ],
      "metadata": {
        "id": "hnyh1SX_P1XV"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Rows & Columns\n"
      ],
      "metadata": {
        "id": "jNb8UJbpPwNj"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## Row\n",
        "\n",
        "This is a basic row"
      ],
      "metadata": {
        "id": "EKtdsEFKP_te"
      }
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "4NGHpjd5PZld"
      },
      "outputs": [],
      "source": [
        "@me.page(path=\"/row\")\n",
        "def row():\n",
        "    with me.box(style=me.Style(display=\"flex\", flex_direction=\"row\")):\n",
        "        me.text(\"Left\")\n",
        "        me.text(\"Right\")\n",
        "\n",
        "me.colab_show(path=\"/row\", height=100)"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "## Row with spacing"
      ],
      "metadata": {
        "id": "799y-fhGB2h2"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "@me.page(path=\"/row-with-spacing\")\n",
        "def row():\n",
        "    # Try using \"space-between\" instead of \"space-around\"\n",
        "    with me.box(style=me.Style(display=\"flex\", flex_direction=\"row\", justify_content=\"space-around\")):\n",
        "        me.text(\"Left\")\n",
        "        me.text(\"Right\")\n",
        "\n",
        "me.colab_show(path=\"/row-with-spacing\", height=100, width=\"50%\")"
      ],
      "metadata": {
        "id": "cJApeWgoB08H"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "## Row with alignment"
      ],
      "metadata": {
        "id": "amrmzDjUCZsi"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "@me.page(path=\"/row-with-alignment\")\n",
        "def row():\n",
        "    # Try commenting out align_items=\"center\" and see what it looks like\n",
        "    with me.box(style=me.Style(display=\"flex\", flex_direction=\"row\", align_items=\"center\")):\n",
        "        me.box(style=me.Style(background=\"red\", height=50, width=\"50%\"))\n",
        "        me.box(style=me.Style(background=\"blue\", height=100, width=\"50%\"))\n",
        "\n",
        "me.colab_show(path=\"/row-with-alignment\", height=100, width=\"50%\")"
      ],
      "metadata": {
        "id": "6ZgQCDt5CcY7"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Grid"
      ],
      "metadata": {
        "id": "soEezch7DAxT"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## Side-by-side"
      ],
      "metadata": {
        "id": "m9I06DnsDD-E"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "@me.page(path=\"/grid-sxs\")\n",
        "def row():\n",
        "    # 1fr means 1 fraction, so each side is the same size.\n",
        "    # Try changing one of the 1fr to 2fr and see what it looks like\n",
        "    with me.box(style=me.Style(display=\"grid\", grid_template_columns=\"1fr 1fr\")):\n",
        "        me.text(\"A bunch of text\")\n",
        "        me.text(\"Some more text\")\n",
        "\n",
        "me.colab_show(path=\"/grid-sxs\", height=100, width=\"50%\")"
      ],
      "metadata": {
        "id": "m2fIwI5IDDim"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "## Header - Body - Footer layout"
      ],
      "metadata": {
        "id": "A1whheFYDXEX"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "import mesop as me\n",
        "\n",
        "@me.page(path=\"/grid-header-body-footer\")\n",
        "def app():\n",
        "    with me.box(style=me.Style(\n",
        "        display=\"grid\",\n",
        "        grid_template_rows=\"auto 1fr auto\",\n",
        "        height=\"100%\"\n",
        "    )):\n",
        "        # Header\n",
        "        with me.box(style=me.Style(\n",
        "            background=\"#f0f0f0\",\n",
        "            padding=me.Padding.all(24)\n",
        "        )):\n",
        "            me.text(\"Header\")\n",
        "\n",
        "        # Body\n",
        "        with me.box(style=me.Style(\n",
        "            padding=me.Padding.all(24),\n",
        "            overflow_y=\"auto\"\n",
        "        )):\n",
        "            me.text(\"Body Content\")\n",
        "            # Add more body content here\n",
        "\n",
        "        # Footer\n",
        "        with me.box(style=me.Style(\n",
        "            background=\"#f0f0f0\",\n",
        "            padding=me.Padding.all(24)\n",
        "        )):\n",
        "            me.text(\"Footer\")\n",
        "\n",
        "me.colab_show(path=\"/grid-header-body-footer\", height=400)"
      ],
      "metadata": {
        "id": "ZP7l_mMQDWoK"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "## Sidebar layout"
      ],
      "metadata": {
        "id": "rxyuPKCeEmUo"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "import mesop as me\n",
        "\n",
        "@me.page(path=\"/sidebar-layout\")\n",
        "def app():\n",
        "    with me.box(style=me.Style(\n",
        "        display=\"grid\",\n",
        "        grid_template_columns=\"250px 1fr\",\n",
        "        height=\"100%\"\n",
        "    )):\n",
        "        # Sidebar\n",
        "        with me.box(style=me.Style(\n",
        "            background=\"#f0f0f0\",\n",
        "            padding=me.Padding.all(24),\n",
        "            overflow_y=\"auto\"\n",
        "        )):\n",
        "            me.text(\"Sidebar\")\n",
        "\n",
        "        # Main content\n",
        "        with me.box(style=me.Style(\n",
        "            padding=me.Padding.all(24),\n",
        "            overflow_y=\"auto\"\n",
        "        )):\n",
        "            me.text(\"Main Content\")\n",
        "\n",
        "me.colab_show(path=\"/sidebar-layout\", height=400)"
      ],
      "metadata": {
        "id": "nXhALOkrEnmp"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Responsive UI\n",
        "\n",
        "This is similar to the Grid Sidebar layout above, except on smaller screens, we will hide the sidebar. Try resizing the browser window and see how the UI changes."
      ],
      "metadata": {
        "id": "hRz2iKGGFBfI"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "import mesop as me\n",
        "\n",
        "@me.page(path=\"/responsive-ui\")\n",
        "def app():\n",
        "    is_desktop = me.viewport_size().width > 640\n",
        "    with me.box(style=me.Style(\n",
        "        display=\"grid\",\n",
        "        grid_template_columns=\"250px 1fr\" if is_desktop else \"1fr\",\n",
        "        height=\"100%\"\n",
        "    )):\n",
        "        if is_desktop:\n",
        "          # Sidebar\n",
        "          with me.box(style=me.Style(\n",
        "              background=\"#f0f0f0\",\n",
        "              padding=me.Padding.all(24),\n",
        "              overflow_y=\"auto\"\n",
        "          )):\n",
        "              me.text(\"Sidebar\")\n",
        "\n",
        "        # Main content\n",
        "        with me.box(style=me.Style(\n",
        "            padding=me.Padding.all(24),\n",
        "            overflow_y=\"auto\"\n",
        "        )):\n",
        "            me.text(\"Main Content\")\n",
        "\n",
        "me.colab_show(path=\"/responsive-ui\", height=400)"
      ],
      "metadata": {
        "id": "GLdBlUtNFFiw"
      },
      "execution_count": null,
      "outputs": []
    }
  ]
}
